﻿@model YiYiTong.Rocket.Model.Manager.LoginReqModel
@{
    ViewBag.Title = "爱电子管理后台登录";
    Layout = "~/Views/Shared/_LoginLayout.cshtml";
}
<link rel="stylesheet" href="/Css/normalize.css">

<style type="text/css">
    .btn {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        padding: 4px 10px 4px;
        margin-bottom: 0;
        font-size: 13px;
        line-height: 18px;
        color: #333333;
        text-align: center;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
        vertical-align: middle;
        background-color: #f5f5f5;
        background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
        background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
        background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
        background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
        background-image: linear-gradient(top, #ffffff, #e6e6e6);
        background-repeat: repeat-x;
        filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0);
        border-color: #e6e6e6 #e6e6e6 #e6e6e6;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        border: 1px solid #e6e6e6;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        *margin-left: .3em;
    }

        .btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
            background-color: #e6e6e6;
        }

    .btn-large {
        padding: 9px 14px;
        font-size: 15px;
        line-height: normal;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .btn:hover {
        color: #333333;
        text-decoration: none;
        background-color: #e6e6e6;
        background-position: 0 -15px;
        -webkit-transition: background-position 0.1s linear;
        -moz-transition: background-position 0.1s linear;
        -ms-transition: background-position 0.1s linear;
        -o-transition: background-position 0.1s linear;
        transition: background-position 0.1s linear;
    }

    .btn-primary, .btn-primary:hover {
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        color: #ffffff;
    }

        .btn-primary.active {
            color: rgba(255, 255, 255, 0.75);
        }

    .btn-primary {
        background-color: #4a77d4;
        background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4);
        background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4));
        background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4);
        background-image: -o-linear-gradient(top, #6eb6de, #4a77d4);
        background-image: linear-gradient(top, #6eb6de, #4a77d4);
        background-repeat: repeat-x;
        filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0);
        border: 1px solid #3762bc;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
    }

        .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
            filter: none;
            background-color: #4a77d4;
        }

    .btn-block {
        width: 100%;
        display: block;
    }

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }

    html {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    body {
        width: 100%;
        height: 100%;
        font-family: 'Open Sans', sans-serif;
        background: #092756;
        background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
        background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%);
        background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg, #670d10 0%,#092756 100%);
        background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%,#092756 100%);
        background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
    }

    .login {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -150px 0 0 -150px;
        width: 300px;
        height: 300px;
    }

        .login h1 {
            color: #fff;
            text-shadow: 0 0 10px rgba(0,0,0,0.3);
            letter-spacing: 1px;
            text-align: center;
        }

    input {
        width: 100%;
        margin-bottom: 10px;
        background: rgba(0,0,0,0.3);
        border: none;
        outline: none;
        padding: 10px;
        font-size: 13px;
        color: #fff;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
        border: 1px solid rgba(0,0,0,0.3);
        border-radius: 4px;
        box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
        -webkit-transition: box-shadow .5s ease;
        -moz-transition: box-shadow .5s ease;
        -o-transition: box-shadow .5s ease;
        -ms-transition: box-shadow .5s ease;
        transition: box-shadow .5s ease;
    }

        input:focus {
            box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2);
        }
</style>

<div class="login">
    <form action="@Url.Action("Login","User")" method="post">

        <h1>爱电子管理后台系统</h1>
        <input type="hidden" name="ReturnUrl" id="ReturnUrl" value="@Request.QueryString["ReturnUrl"]" />
        <input name="LoginName" value="" id="txtLoginName" maxlength="30" type="text" class="wb1" placeholder="用户名：" />
        <p></p>
        <input name="Password" value="" maxlength="38" id="txtPassword" type="password" class="wb1" placeholder="密  码：" onpaste="javascript:return false;" oncopy="javascript:return false;" oncut="javascript:return false;" />
        <p style="color:red;" id="spMsg"></p>
        <button type="submit" class="btn btn-primary btn-block btn-large">管理登录</button>

        <script src="~/Css/assets/js/jquery.min.js"></script>
        <script src="~/Css/assets/js/jquery.form.js"></script>
        <script src="~/Css/assets/js/jquery.validate.js"></script>
        <script>
            $(function () {
                //判断只能字母或数字
                jQuery.validator.addMethod("IsNumOrLetter", function (value, element) {

                    //flg = this.optional(element) || !!value.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);
                    //return flg;
                    return this.optional(element) || /^(\d|[a-zA-Z])+$/.test(value);
                }, "用户名格式不正确");

                $('#sendCaptcha').on('click', function () {
                    $("#spMsg").html('');
                    var ph = $('#txtLoginName').val();
                    var telReg = !!ph.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/);
                    if (telReg == false) {
                        $("#spMsg").html('用户名只能为手机号码');
                        return;
                    }
                    if (parseInt($("#sendCaptcha").attr("obj")) > 0) {
                        return;
                    }
                    $("#sendCaptcha").text("59秒重新获取");
                    $("#sendCaptcha").attr("obj", "59");
                    timer1 = setInterval(countDown, 1000);

                    $.post('@Url.Action("CaptchaText", "User")',
                      {
                          phone: ph
                      }, function (result) {

                      });
                });

                $('#imgCaptcha').on('click', function () {
                    var self = this;
                    var d = new Date();
                    var ts = d.valueOf();
                    self.src = self.src + "?ts=" + ts;
                });

                var validator = $('form').validate({
                    errorLabelContainer: $("#errorContainer"),
                    errorElement: "span",
                    rules: {
                        LoginName: { required: true, IsNumOrLetter: true },
                        Password: { required: true },
                        Captcha: { required: true, remote: '/User/CheckValidateCode' }
                    },
                    messages: {
                        LoginName: { required: "用户名不为空", IsNumOrLetter: "用户名格式不正确" },
                        Password: { required: "密码不为空" },
                        Captcha: { required: "验证码不为空", remote: '验证码错误' }
                    },
                    submitHandler: function (form) {
                        $(form).ajaxSubmit(function (result) {

                            if (result.IsSuccess == undefined) {
                                $("#spMsg").html('系统异常，请联系技术');
                                return false;
                            }
                            else {
                                if (result.IsSuccess) {

                                    top.location.href = result.Body;
                                }
                                else {
                                    $("#spMsg").html(result.Message);
                                    return false;
                                }
                            }
                        });
                    }
                });
            });
        </script>


        <script type="text/javascript" language="javascript">
            //加入收藏

            function AddFavorite(sURL, sTitle) {

                sURL = encodeURI(sURL);
                try {

                    window.external.addFavorite(sURL, sTitle);

                } catch (e) {

                    try {

                        window.sidebar.addPanel(sTitle, sURL, "");

                    } catch (e) {

                        alert("您好,您的浏览器不支持，请使用Ctrl+D进行手动添加,或手动在浏览器里进行设置.");

                    }

                }

            }

            //设为首页

            function SetHome(url) {

                if (document.all) {

                    document.body.style.behavior = 'url(#default#homepage)';

                    document.body.setHomePage(url);

                } else {

                    alert("您好,您的浏览器不支持自动设置页面为首页功能,请您手动在浏览器里设置该页面为首页!");

                }

            }
            function countDown(value) {
                value = parseInt($("#sendCaptcha").attr("obj")) - 1;
                if (value <= 0) {
                    $("#sendCaptcha").text('点击重新发送');
                    $("#sendCaptcha").attr("obj", 0);
                    clearInterval(timer1);
                } else {
                    //alert(value);
                    $("#sendCaptcha").text(value + "秒后重新获取！");
                    $("#sendCaptcha").attr("obj", value);
                    //$("#sendCaptcha").val('请' + value + '秒后重试。');
                }
            }
        </script>
    </form>
</div>
